<template>
    <div class="favorite clear">
        <list-top></list-top>
        <div class="mall-position">主页 > 批发商城 > 收藏夹</div>
        <div class="favoriteMain clear">
            <div class="headTitle">
                    <router-link to="/favoriteproduct"><span  class="active">收藏药品（160）</span></router-link>
                    <router-link to="/favoritestore"><span>收藏店铺（60）</span></router-link>
            </div>
            <div class="favoriteProductMain clear">
                <div class="productPublicStyle-a" v-for="(oproduct,index) in tableList" :key="index">
                    <div class="p-tick" :class="{active:activeTick}">
                        <i class="iconfont icon-gou"></i>
                        <el-checkbox class="fl" v-model='checkArr' :label="oproduct.id" @change="changevalue"></el-checkbox>
                    </div>
                    <router-link to="/"><img src="../images/bak09.jpg" alt=""></router-link>
                    <div class="productDetail">
                        <div class="p-name" title="oproduct.name">
                            <router-link to="/">{{oproduct.name}}</router-link>
                        </div>
                        <div class="p-category">{{oproduct.category}}</div>
                        <div class="p-price">¥{{oproduct.price}}</div>
                        <div class="p-producer">{{oproduct.producer}}</div>
                        <el-rate v-model="oproduct.rateValue" disabled>
                        </el-rate>
                    </div>
                    <router-link to="/" class="p-delete"><i class="iconfont icon-shanchu"></i></router-link>
                    <router-link to="/" class="p-service"><i class="iconfont icon-kefu"></i><span>客服</span></router-link>
                </div>
            </div>
            <div class="pageBotom">
                <div class="pageBotomLeft">
                    <el-checkbox class="fl" v-model='cheackAllChecked' @change='checkAllFun'>全选</el-checkbox>
                    <span class="reverseSelected" @click="reverseChecked">反选</span>
                    <span class="deleteSelected">删除选中</span>
                </div>
                <div class="pageBotomRight">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import listTop from "./public/listTop.vue";
    export default {
        components:{
            listTop,
        },
        data() {
            return {
                activeTick: false,
                tableList: [ //商品列表
                    {
                        id: 1,
                        name: "白云山小菜胡感冒药哈小菜胡感冒药哈白云山小菜胡感冒药哈小菜胡感冒药哈",
                        category: "中成药",
                        price: "268.00",
                        producer: "桂林医药集团有限公司",
                        rateValue: 4
                    },
                    {
                        id: 2,
                        name: "白云山小菜胡感冒药哈小菜胡感冒药哈白云山小菜胡感冒药哈小菜胡感冒药哈",
                        category: "中成药",
                        price: "108.00",
                        producer: "桂林医药集团有限公司",
                        rateValue: 5
                    },
                    {
                        id: 3,
                        name: "白云山小菜胡感冒药哈小菜胡感冒药哈白云山小菜胡感冒药哈小菜胡感冒药哈",
                        category: "中成药",
                        price: "108.00",
                        producer: "桂林医药集团有限公司",
                        rateValue: 5
                    },
                    {
                        id: 4,
                        name: "白云山小菜胡感冒药哈小菜胡感冒药哈白云山小菜胡感冒药哈小菜胡感冒药哈",
                        category: "中成药",
                        price: "108.00",
                        producer: "桂林医药集团有限公司",
                        rateValue: 3.5
                    },
                    {
                        id: 5,
                        name: "白云山小菜胡感冒药哈小菜胡感冒药哈白云山小菜胡感冒药哈小菜胡感冒药哈",
                        category: "中成药",
                        price: "108.00",
                        producer: "桂林医药集团有限公司",
                        rateValue: 1
                    },
                    {
                        id: 6,
                        name: "白云山小菜胡感冒药哈小菜胡感冒药哈白云山小菜胡感冒药哈小菜胡感冒药哈",
                        category: "中成药",
                        price: "108.00",
                        producer: "桂林医药集团有限公司",
                        rateValue: 1
                    }
                ],
                cheackAllChecked: false,
                checkArr: [],
                checkCompleteArr: [],
                currentPage4: 4,
            }
        },
        methods: {
            selectProductItem(index) {
                console.log(index);
            },
            checkAllFun() {
                //实现全选（1/5）
                var _this = this;
                this.checkArr = [];
                if (this.cheackAllChecked) {
                    this.tableList.forEach(function(item, index) {
                        if (index >= 0) {
                            _this.checkArr.push(item.id);
                        }
                    });
                }
            },
            reverseChecked() {
                //实现反选（2/5）
                var _this = this;
                var changeArr = [];
                this.tableList.forEach(function(item, index) {
                    if (index >= 0) {
                        changeArr.push(item.id);
                    }
                });
                this.removeByValue(changeArr, this.checkArr);
            },
            removeByValue(changearr, checkarr) {
                //反选过滤函数（3/5）
                var _this = this;
                for (var j = 0; j < checkarr.length; j++) {
                    for (var i = 0; i < changearr.length; i++) {
                        if (changearr[i] === checkarr[j]) {
                            changearr.splice(i, 1);
                            break;
                        }
                    }
                }
                this.checkArr = changearr;
                if (changearr.length <= _this.checkCompleteArr.length) {
                    this.cheackAllChecked = false;
                }
                if (changearr.length === _this.checkCompleteArr.length) {
                    this.cheackAllChecked = true;
                }
            },
            changevalue() {
                //选项的change事件（4/5）
                var _this = this;
                if (this.checkArr.length <= _this.checkCompleteArr.length) {
                    this.cheackAllChecked = false;
                }
                if (this.checkArr.length === _this.checkCompleteArr.length) {
                    this.cheackAllChecked = true;
                }
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            },
        },
        mounted() {
            //全选或反选用到的完整数组值（5/5）
            var _this = this;
            this.tableList.forEach(function(item, index) {
                if (index >= 0) {
                    _this.checkCompleteArr.push(item.id);
                }
            });
        }
    }
</script>
<style lang="less">
    @import "css/favorite.less";
</style>

